<script setup lang="ts">
import { ref } from 'vue'

// defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <!-- <h1>{{ msg }}</h1> -->
  <!-- <button
    bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
    text="sm white"
    font="mono light"
    p="y-2 x-4"
    border="2 rounded blue-200"
  >
    Button
  </button>
  <p>
    Recommended IDE setup:
    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
    +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
  </p>

  <p>See <code>README.md</code> for more information.</p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Docs </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
  </p>

  <button type="button" @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <button class="bg-hex-b2a8bb">123</button>
  <div class="*app p-1">23333333333333333333333333333333333333333333333</div>
  <div class="btn hover:btn-green">hello world</div>
  <div class="btn-blue">hello world</div>
  <div class="btn-theme-blue">hello world</div>
  <div class="p-5px mt-[100px]">233</div> -->
  <!-- <div class="box-container"> -->
    <div class="box-header">不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部不确定高度的头部</div>
    <div class="box-content">table区域</div>
  <!-- </div> -->
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
.box-container {
  display: flex;
  flex-direction: column;
  /*  */
  height: 100%;
  width: 100%;
  text-align: center;
  border: 1px solid violet;
  padding: 10px;
}
.box-header {
  flex-shrink: 0;
  /*  */
  padding: 20px;
  border: 1px solid green;
  margin-bottom: 10px;
}
.box-content {
  flex: auto;
  /*  */
  border: 1px solid skyblue;
}
</style>
